import { Select } from 'antd';


class SelectField extends React.Component {

    state = {
        selectedItems: [],
    };

    handleChange = selectedItems => {
        this.setState({ selectedItems });
    };

    render() {
        const OPTIONS = this.props.arr;
        const { selectedItems } = this.state;
        const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
        this.props.put(this.state.selectedItems,this.props.index);
        return (
            <Select
                mode="multiple"
                placeholder="Inserted are removed"
                value={selectedItems}
                onChange={this.handleChange}
                style={{ width: '100%' }}
            >
                {filteredOptions.map(item => (
                    <Select.Option key={item} value={item}>
                        {item}
                    </Select.Option>
                ))}
            </Select>
        );
    }
}

export default SelectField;